<template>
  <div>
    <nav-bar></nav-bar>
    <go-top></go-top>
    <div class="index">
      <div class="main">
        <div class="message">
          <off-model v-for="n in 20" :key="n" :Data="Pdata[0]"></off-model>
        </div>
      </div>
      <div class="alide">
        <!-- 二维码 -->
        <div class="QR">
          <img
            src="https://img-static.mihoyo.com/new_qrcode/qrcode_ys.png"
            alt=""
          />
          <div>
            <p>扫码下载米游社App</p>
            <p>了解提瓦特最新资讯</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import CommentModel from "@/components/CommentModel.vue";
import NavBar from "@/components/NavBar.vue";
import OffModel from '@/components/OffModel.vue';
import GoTop from '@/components/GoTop.vue';
export default {
  name: "swiper-example-pagination",
  title: "Pagination",
  components: {
    Swiper,
    SwiperSlide,
    CommentModel,
    NavBar,
    OffModel,
    GoTop,
  },
  data() {
    return {
      Pdata: [
        {
          component:30000,
          title:'【有奖活动】2.8版本第二期话题活动开启！发帖赢原石~',
          article:'姆，旅行者们好呀～宵宫又和大家见面啦！作为「长野原烟花店」的现任店主，宵宫被誉为「夏祭的女王」。她有着焰火般旺盛的精力，也总能带来无与伦比的惊喜。烟花虽然转瞬即逝，但绽放瞬间的快乐和绚烂却是永恒的！旅行者们也喜欢烟花吗？如果让你协助宵宫举办一次烟花会，你想设计怎样的烟花呢？',
          dataTime: 1659403140000,
          images:"https://upload-bbs.mihoyo.com/upload/2022/08/01/76387920/4eb0453eb2247479a65ed1c1eb6430f3_7004657968709384169.jpg?x-oss-process=image/resize,s_300/quality,q_80/auto-orient,0/interlace,1/format,jpg"
        },
      ],
    };
  },
  mounted() {
    this.$store.state.Dselected = this.$route.meta.selected;
  },
  
};
</script>

<style scoped>
.index {
  display: flex;
  width: 65%;
  /* background: black; */
  margin: 0px auto 60px;
  padding-top: 30px;
}
.main {
  width: 640px;
  background: white;
  border-radius: 10px;
  padding: 20px 20px;
  margin:120px 25px 0 auto;
}
.message {
  box-sizing: border-box;
  /* margin-top: 30px; */
  border-radius: 10px;
  width: 100%;
  background: #fff;
}
.btn {
  text-align: center;
}
.more {
  margin: 0 auto;
  width: 100px;
  padding: 20px;
  background: #1fbbf4;
  border-radius: 50px;
  color: white;
  margin-top: 10px;
}
.alide {
  margin-top: 120px;
  margin-right:auto;
  width: 280px;
}
.alide .QR {
  width: 260px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.alide .QR img {
  width: 100px;
  margin-right: 5px;
}
.alide .QR > div > p:first-child {
  color: #1fbbf4;
}
</style>